<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 912px;
            height: 600px;
            margin: 0 auto;
        }

        .box {
            width: 275px;
            height: 275px;
            border: 6px solid #cccccc;
            position: relative;
            float: left;
            margin-right: 25px;
            margin-bottom: 25px;

        }

        .box .pic {
            width: 100%;
            height: 100%;
            /* opacity: 0.5;  透明度*/
        }

        .box .icon {
            position: absolute;
            left: 7px;
            bottom: 7px;
            width: 30px;
            height: 30px;

        }

        .box .greemicon {
            display: none;
        }

        .box:hover .greemicon {
            display: block;
        }


        .box p {
            position: absolute;
            left: 0;
            top: 0;
            color: white;
            padding: 7px 5px;
            display: none;

        }

        .box:hover p {
            display: block;
        }

        .box:hover .pic {
            opacity: 0.7;
            /* 半透明 */
        }

        .box p .img {
            width: 24px;
            height: 12px;
        }

        .right{
            margin-right: 0;
            margin-bottom: 0;
        }
    </style>
</head>

<body>

    <div class="container">


        <div class="box">
            <img src="./img/1.webp" alt="" class="pic">
            <img src="./img/icon.png" alt="" class="icon">
            <img src="./img/4.png" alt="" class="icon greemicon">
            <p>
                <img src="./img/2.webp" alt="" class="img">
                <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo odit ex neque fugiat nulla placeat
                    quaerat nobis! Laudantium iure quas doloribus excepturi optio. Doloremque, aut sequi numquam
                    voluptas modi quas!</span>

            </p>
        </div>
        <div class="box">
            <img src="./img/1.webp" alt="" class="pic">
            <img src="./img/icon.png" alt="" class="icon">
            <img src="./img/4.png" alt="" class="icon greemicon">
            <p>
                <img src="./img/2.webp" alt="" class="img">
                <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo odit ex neque fugiat nulla placeat
                    quaerat nobis! Laudantium iure quas doloribus excepturi optio. Doloremque, aut sequi numquam
                    voluptas modi quas!</span>

            </p>
        </div>
        <div class="box right">
            <img src="./img/1.webp" alt="" class="pic">
            <img src="./img/icon.png" alt="" class="icon">
            <img src="./img/4.png" alt="" class="icon greemicon">
            <p>
                <img src="./img/2.webp" alt="" class="img">
                <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo odit ex neque fugiat nulla placeat
                    quaerat nobis! Laudantium iure quas doloribus excepturi optio. Doloremque, aut sequi numquam
                    voluptas modi quas!</span>

            </p>
        </div>
        <div class="box">
            <img src="./img/1.webp" alt="" class="pic">
            <img src="./img/icon.png" alt="" class="icon">
            <img src="./img/4.png" alt="" class="icon greemicon">
            <p>
                <img src="./img/2.webp" alt="" class="img">
                <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo odit ex neque fugiat nulla placeat
                    quaerat nobis! Laudantium iure quas doloribus excepturi optio. Doloremque, aut sequi numquam
                    voluptas modi quas!</span>

            </p>
        </div>
        <div class="box">
            <img src="./img/1.webp" alt="" class="pic">
            <img src="./img/icon.png" alt="" class="icon">
            <img src="./img/4.png" alt="" class="icon greemicon">
            <p>
                <img src="./img/2.webp" alt="" class="img">
                <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo odit ex neque fugiat nulla placeat
                    quaerat nobis! Laudantium iure quas doloribus excepturi optio. Doloremque, aut sequi numquam
                    voluptas modi quas!</span>

            </p>
        </div>
    </div>
    <div class="box right">
        <img src="./img/1.webp" alt="" class="pic">
        <img src="./img/icon.png" alt="" class="icon">
        <img src="./img/4.png" alt="" class="icon greemicon">
        <p>
            <img src="./img/2.webp" alt="" class="img">
            <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo odit ex neque fugiat nulla placeat
                quaerat nobis! Laudantium iure quas doloribus excepturi optio. Doloremque, aut sequi numquam voluptas
                modi quas!</span>

        </p>
    </div>


    </div>


</body>

</html>